<template>
    <div class="tab-container-view">
        <a-tabs v-model="activeKey" :type="config.tabType" :tabPosition="config.tabPosition">
            <a-tab-pane v-for="(tabItem,index) in tabList" :key="tabItem.id">
                <span slot="tab">
                     <rx-use-icon v-if="tabItem.icon" v-model="tabItem.icon"></rx-use-icon>
                    {{tabItem.name}}
                </span>
                <div class="tab-common">
                    <div class="tab-common-defConf" v-if="tabItem.defConf">
                        <customEditControl :item="tabItem" :editImgList="editImgList" :readonly="true"></customEditControl>
                    </div>
                </div>
            </a-tab-pane>
        </a-tabs>
    </div>
</template>

<script>
/**
 * tab容器
 */
import { Util } from "@lowcode/jpaas-common-lib";

export default {
    name: "tab-container-view",
    components: {
        "customEditControl":()=>import('@/views/modules/form/core/FormCustomEditControl')
    },
    props:{
        config:{},
        editImgList:{},
    },
    data() {
        return {
            activeKey:"1",
            tabList:[],
            //默认tab
            defTabs:[{id: Util.randomId(), name:"Tab1", icon:"", defConf: "", config: ""}, {id: Util.randomId(), name:"Tab2", icon:"", defConf: "", config: ""}],
        }
    },
    created() {
        this.initConfig();
        if(this.tabList.length>0){
            this.activeKey=this.tabList[0].id;
        }
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "formCustom", key);
        },
        initConfig(){
            this.tabList=[];
            if(this.config && this.config.tabs){
                this.tabList.push(...this.config.tabs);
            }else {
                this.tabList.push(...this.defTabs);
            }
        },
    },
    watch: {
        config: {
            handler: function (val, oldval) {
                this.initConfig();
            },
            deep: true
        },
    },
}
</script>

<style scoped>

.tab-common{
    width: 100%;
    height: 100%;
    overflow: auto;
    padding: 10px;
}
.tab-common-defConf{
    width: 100%;
    height: 100%;
    overflow: auto;
    position: relative;
}
.tab-container-view{
    width: 100%;
    height: 100%
}
.tab-container-view>>>.ant-tabs-right-content{
    height: 100%;
    padding-right: 1px!important;
}
.tab-container-view>>>.ant-tabs-bar{
    margin-bottom: 1px!important;
}
.tab-container-view>>>.ant-tabs-bottom-content{
    height: calc(100% - 50px);
}
.tab-container-view>>>.ant-tabs-bottom-bar{
    margin-top: 1px!important;
}
.tab-container-view>>>.ant-tabs-left-content{
  padding-left: 1px!important;
}
</style>